<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script> -->
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	{{msg}}
</div>
<script>
	/**
	 * Vue.js 默认异步更新 DOM。每当观察到数据变化时，Vue 就开始一个
	 * 队列，将同一事件循环内所有的数据变化缓存起来。如果一个 
	 * watcher 
	 * 被多次触发，只会推入一次到队列中。等到下一次事件循环，Vue 
	 * 将清空队列，只进行必要的 DOM 更新。在内部异步队列优先使用 
	 * MutationObserver，如果不支持则使用 setTimeout(fn, 0)
	 * 例如，设置了 vm.someData = 'new value'，DOM 不会立即更新，而是
	 * 在下一次事件循环清空队列时更新。我们基本不用关心这个过程，但是
	 * 如果想在 DOM 状态更新后做点什么，这会有帮助。尽管 Vue.js 
	 * 鼓励开发者沿着数据驱动的思路，避免直接修改 
	 * DOM，但是有时确实要这么做。为了在数据变化之后等待 Vue.js 
	 * 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(
	 * callback) 。回调在 DOM 更新完成后调用
	 */
	var vm = new Vue({
	 	 el: '#root',
		 data: {
		 	msg: '123'
		 }
	})
	vm.msg = 'new message' // 修改数据
	vm.$el.textContent === 'new message' // false
	Vue.nextTick(function () {
	 	vm.$el.textContent === 'new message' // true
	})
</script>	
</body>
</html>